<template>
  <div class="bd_end" id="bd">
      <h3 id="title">Loading...</h3>
  </div>
</template>

<script>
export default {
  data(){
    return{
        canvas:null,
    }
  },
  computed: {
    },
  methods:{
      start(){  
        document.getElementById("bd").appendChild( this.canvas );
        document.getElementById("bd").className = "bd_start"
      },
      end(){
        document.getElementById("bd").removeChild( this.canvas );
        document.getElementById("bd").className = "bd_end"
      }
  },
  mounted(){
      this.canvas = document.createElement( 'canvas')
    var M = Math,
        PI = M.PI,
        TWOPI = PI * 2,
        HALFPI = PI / 2,
        ctx = this.canvas.getContext( '2d' ),
        width = this.canvas.width = 350,
        height = this.canvas.height = 350,
        cx = width / 2,
        cy = height / 2,
        count = 40,
        sizeBase = 0.1,
        sizeDiv = 5,
        tick = 0;

    ctx.translate( cx, cy );

    (function loop() {
      requestAnimationFrame( loop );  
      ctx.clearRect( -width / 2, -height / 2, width, height );
      ctx.fillStyle = '#fff';  
      var angle = tick / 8,
          radius = -50 + M.sin( tick / 15 ) * 100,
          size;
      
      for( var i = 0; i < count; i++ ) {
        angle += PI / 64;
        radius += i / 30;
        size = sizeBase + i / sizeDiv;
        
        ctx.beginPath();
        ctx.arc( M.cos( angle ) * radius, M.sin( angle ) * radius, size, 0, TWOPI, false );
        ctx.fillStyle = 'hsl(200, 70%, 50%)';
        ctx.fill();
        
        ctx.beginPath();
        ctx.arc( M.cos( angle ) * -radius, M.sin( angle ) * -radius, size, 0, TWOPI, false );
        ctx.fillStyle = 'hsl(320, 70%, 50%)';
        ctx.fill();
        
        ctx.beginPath();
        ctx.arc( M.cos( angle + HALFPI ) * radius, M.sin( angle + HALFPI ) * radius, size, 0, TWOPI, false );
        ctx.fillStyle = 'hsl(60, 70%, 50%)';
        ctx.fill();
        
        ctx.beginPath();
        ctx.arc( M.cos( angle + HALFPI ) * -radius, M.sin( angle + HALFPI ) * -radius, size, 0, TWOPI );
        ctx.fillStyle = 'hsl(0, 0%, 100%)';
        ctx.fill();
      }
      
      tick++;
    })();
  }
}
</script>
<style lang="scss" scoped>
.bd_start{
  padding:0;
  margin:0;
  background: #111;
  overflow: hidden;
  display:flex;
  height: 100vh;
  h3 {
    color: white;
    font-size: 28px;
    font-family: fantasy;
    margin-left: 26.5em;
    margin-top: 20em;
    }
}
.bd_end{
  visibility: hidden;
  h3{
      visibility: hidden;
  }
}
canvas{
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  margin-left: 78vh;
  margin-top: 28vh;
}


</style>
